<template>
    <div class="left">
        <SceneTree :sceneTree="sceneTree" @contexMenuEvent="handlerContexMenuEvent" :menuContent="menuContent">
        </SceneTree>
        <hr />
        <h3>点位信息加载</h3>
        <button @click="createESImageLabel">图片标签</button>
        <button @click="createESPoi2D">Poi2D</button>
        <button @click="createESPoi3D">Poi3D</button>
        <hr />
        <h3>自定义Div</h3>
        <button @click="createESGeoDiv">自定义Div1</button>
        <button @click="createESGeoDiv1">自定义Div2</button>


    </div>
</template>

<script setup>
import { onUnmounted, ref } from "vue"
import * as echarts from 'echarts';
import getMyProjectManager from '@/scripts/getMyProjectManager';
import SceneTree from "vue-xe2-plugin/dist-node/components/xe2/common/SceneTree/SceneTree.vue"
import { ESImageLabel, ESPoi2D, ESPoi3D, ESGeoDiv } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const myProjectManager = getMyProjectManager();
myProjectManager._pointCollection.show = true
myProjectManager.activeViewer.flyIn([127.76961333168403, 19.78447032172496, 2254875.2075205366], [329.1352401707051, -52.45219949779524, 0.013640450671866543], 2)
myProjectManager.activeViewer.statusChanged.don((status) => {
    if (status == "Created") myProjectManager.activeViewer.flyIn([127.76961333168403, 19.78447032172496, 2254875.2075205366], [329.1352401707051, -52.45219949779524, 0.013640450671866543], 2)
})


// 对象可视化集合
var sceneObjects = []

// 结构树
const sceneTree = myProjectManager.getSceneTree("pointSceneTree")

// 菜单栏
const menuContent = ref(null)

// 创建ESImageLabel
const createESImageLabel = () => {
    var sceneObj = myProjectManager.createSceneObject(ESImageLabel)
    if (!sceneObj) return
    sceneObj.editing = true
    sceneObj.anchor = [0.5, 1]
    sceneObj.widgetEvent.disposableOn((e) => { console.log(e) })
    sceneObjects.push(sceneObj)
}

// 创建ESPoi2D
const createESPoi2D = () => {
    var sceneObj = myProjectManager.createSceneObject(ESPoi2D)
    if (!sceneObj) return
    sceneObj.name = "龙旗广场"
    sceneObj.mode = "P3D02"
    sceneObj.editing = true
    sceneObj.widgetEvent.disposableOn((e) => { console.log(e) })
    sceneObjects.push(sceneObj)
}

// 创建ESPoi3D
const createESPoi3D = () => {
    var sceneObj = myProjectManager.createSceneObject(ESPoi3D)
    if (!sceneObj) return
    sceneObj.name = "3D标牌"
    sceneObj.mode = "diamond"
    sceneObj.style = {
        FX_Color: [0, 1, 0, 1],
        UI_Color: [0, 1, 0, 1],
        text: "3D标牌",
    };
    sceneObj.editing = true
    sceneObj.widgetEvent.disposableOn((e) => { alert(e) })
    sceneObjects.push(sceneObj)
}

// 创建自定义DIV
const createESGeoDiv = () => {
}

// 创建自定义DIV
const createESGeoDiv1 = () => {
    var sceneObj = myProjectManager.createSceneObject(ESGeoDiv)
    if (!sceneObj) return
    sceneObj.editing = true
    sceneObj.instanceClass = class MyDiv {
        constructor(container, eSGeoDiv, viewer) {
            this._container = container;
            this._div = document.createElement('div');
            this._div.style.width = '250px'
            this._div.style.height = '250px'
            this._div.style.backgroundColor = 'rgba(0,0,0,0)'
            var chart = echarts.init(this._div);
            chart.clear()
            chart.setOption({
                color: ['#3D91F7', '#61BE67'],
                radar: {
                    radius: '80%',
                    triggerEvent: true,
                    name: {
                        textStyle: {
                            color: '#fff',
                            fontSize: '13',
                        }
                    },
                    nameGap: '2',
                    indicator: [
                        { name: '动火', max: 10 },
                        { name: '受限空间', max: 10 },
                        { name: '盲板抽堵', max: 10 },
                        { name: '高处作业', max: 10 },
                        { name: '吊装', max: 10 },
                        { name: '动土', max: 10 },
                        { name: '短路', max: 10 },
                        { name: '临时用电', max: 10 }
                    ],
                    splitArea: {
                        areaStyle: {
                            color: [
                                'rgba(0, 255, 255, 0.1)', 'rgba(0, 255, 255, 0.2)',
                                'rgba(0, 255, 255, 0.3)', 'rgba(0, 255, 255, 0.4)',
                                'rgba(0, 255, 255, 0.5)', 'rgba(0, 255, 255, 0.6)'
                            ].reverse()
                        }
                    },
                    axisLine: { //指向外圈文本的分隔线样式
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            width: 2,
                            color: 'transparent'
                        }
                    },
                    label: {
                        position: 'inside'
                    }
                },
                series: [{
                    name: '安全作业',
                    type: 'radar',
                    itemStyle: {
                        borderColor: 'rgba(66, 242, 185, 1)',
                        color: '#fff',
                        fontSize: 12
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(0, 255, 255, 1)'
                        }
                    },
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: 'rgba(252,211,3, 1)',
                            width: 1
                        }
                    },
                    data: [{
                        value: [7, 2, 0, 0, 0, 0, 0, 6],
                        name: '作业',
                    }
                    ]
                }]
            })
            this._container.appendChild(this._div)
        }
        // 销毁函数，注意此函数必需，否则会报错！
        destroy() {
            this._container.removeChild(this._div);
        }
    }
    sceneObjects.push(sceneObj)
}

/**
 * 树内右键暴露出来的事件
 * @param {*} treeItem 
 */
const handlerContexMenuEvent = (treeItem) => {
    if (treeItem) {
        menuContent.value = [
            {
                text: "飞行定位",
                keys: "",
                func: () => {
                    treeItem.sceneObject.flyTo()
                },
            }
        ]
    }
}

// 销毁所有对象
const destroySceneObject = () => {
    if (sceneObjects.length > 0) {
        sceneObjects.forEach(item => {
            myProjectManager.destroySceneObject(item)
            item = undefined
        })
        sceneObjects.length = 0
    }
}

onUnmounted(() => {
    destroySceneObject()
    myProjectManager._pointCollection.show = false
})



</script>

<style scoped>
.left {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: url(../../assets/left/kuang.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

button {
    width: 150px;
    padding: 10px 0px;
    margin-bottom: 15px;
    border-radius: 5px;
    cursor: pointer;
}

hr {
    width: 90%;
}
</style>